<template>
  <formMax :formList="formList">
    <template #submit="{ item, row }">
      <el-button type="primary" @click="SubmitEvent(item, row)">提交</el-button>
    </template>
  </formMax>
</template>

<script setup lang="ts">
import formMax from '@/components/form/index.vue'
import { ref } from 'vue'

interface RuleForm {
  [key: string]: any
}
const options = Array.from({ length: 100 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
const options2 = Array.from({ length: 100 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
  children: options
}))

function fetchApi(): Promise<Record<string, any>> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(options2);
    }, 1000);
  });
}


const SubmitEvent = (item: any, row: any) => {
  console.log(item, row)
}


const formList = ref<RuleForm>([
  {
    type: 'input',
    label: '活动名称:',
    prop: 'name',
    rules: true, //规则验证，默认 false
    placeholder: '请输入活动名称'
  },
  {
    type: 'select',
    label: '选择器:',
    prop: 'region',
    rules: true,
    multiple: true, //是否多选。默认 false
    field: 'label', //显示字段 默认 label
    value: 'value', //显示值字段 默认 value
    placeholder: '请选择活动区域',
    options: options //下拉选项数据
  },
  {
    type: 'switch',
    label: '活动区域:',
    prop: 'switch',
    on: '', //开颜色自定义 默认 #13ce66
    off: '',//关颜色自定义 默认 #ff4949
    placeholder: '请选择活动区域'
  },
  {
    type: 'datetime', // 时间选择器类型 可选值时间区间 datetimerange  默认 datetime
    label: '时间选择:',
    prop: 'date',
    rules: true,
    format: 'yyyy-MM-dd HH:mm:ss', // 展示的日期格式 默认 yyyy-MM-dd HH:mm:ss
    placeholder: '请选择活动时间'
  },
  {
    type: 'checkbox',
    label: '多选框:',
    prop: 'checkbox',
    rules: true,
    options: [
      {
        label: '备选项1',
        value: '1'
      },
      {
        label: '备选项2',
        value: '2'
      }
    ],
    placeholder: '请选择活动区域'
  },
  {
    type: 'radio',
    label: '单选框:',
    prop: 'radio',
    rules: true,
    options: [
      {
        label: '备选项1',
        value: '1'
      },
      {
        label: '备选项2',
        value: '2'
      }
    ],
    placeholder: '请选择活动区域'
  },
  {
    type: 'rate',
    label: '评分:',
    prop: 'rate',
    rules: true,
    max: 5, //最大分值 默认 5
    allowHalf: true, //是否允许半选 默认 false
    showText: true, //是否显示辅助文字 默认 false
    showScore: true, //是否显示当前分数 默认 false
    texts: ['极差', '失望', '一般', '满意', '惊喜'], //辅助文字数组 默认
  },
  {
    type: 'cascader',
    label: '级联选择:',
    prop: 'cascader',
    rules: true,
    placeholder: '请选择',
    options: options2,
    showAllLevels: true, //是否显示选中值的完整路径 默认 true
    props: {
      checkStrictly: false //是否开启选择框 ，根据需求props可不传
    }
  },
  {
    type: 'submit',
    all: {            // all对象中的属性非必填
      submit: '提交', // 提交按钮文本 默认 提交 
      reset: '重置'   // 重置按钮文本 默认 重置
    },
    // 如果不合适可以去除all属性，使用slot自定义按钮，前提必须有按钮类型type: 'submit'
  },
])

</script>

<style scoped></style>